import { MenuGroup, MenuList } from '@chakra-ui/react';

import { BoardDTO } from '@tourfly/api';
import { ContextMenu, ContextMenuProps } from 'chakra-ui-contextmenu';
import { memo, MouseEvent, useCallback } from 'react';

import { menuListMotionProps } from '@tourfly/theme';

import { useBoardName } from '../hooks/useBoardName';

import GalleryBoardContextMenuItems from './GalleryBoardContextMenuItems';
import NoBoardContextMenuItems from './NoBoardContextMenuItems';

import { BoardId } from '@/features/Gallery/store/types';

type Props = {
  board?: BoardDTO;
  board_id: BoardId;
  children: ContextMenuProps<HTMLDivElement>['children'];
  setBoardToDelete?: (board?: BoardDTO) => void;
};

const BoardContextMenu = memo(
  ({ board, board_id, setBoardToDelete, children }: Props) => {
    const boardName = useBoardName(board_id);

    const skipEvent = useCallback((e: MouseEvent<HTMLDivElement>) => {
      e.preventDefault();
    }, []);

    return (
      <ContextMenu<HTMLDivElement>
        menuProps={{ size: 'sm', isLazy: true }}
        menuButtonProps={{
          bg: 'transparent',
          _hover: { bg: 'transparent' },
        }}
        renderMenu={() => (
          <MenuList
            sx={{ visibility: 'visible !important' }}
            motionProps={menuListMotionProps}
            onContextMenu={skipEvent}
          >
            <MenuGroup title={boardName}>
              {!board && <NoBoardContextMenuItems />}
              {board && (
                <GalleryBoardContextMenuItems
                  board={board}
                  setBoardToDelete={setBoardToDelete}
                />
              )}
            </MenuGroup>
          </MenuList>
        )}
      >
        {children}
      </ContextMenu>
    );
  }
);

BoardContextMenu.displayName = 'HoverableBoard';

export default BoardContextMenu;
